<script setup>
import { ref,reactive,computed,watch,watchEffect } from "vue";
import dirIcon from "./dirIcon.vue"
const props=defineProps({
	data:Object,
	index:Number
})
const active=ref(false)
function openClose(){
	props.data.open=!props.data.open
	console.log("props.data.open:",props.data.open);
}
</script>


<template>
<div class="dirTree">
	<template v-if="data.children">
		<div class="dirTitle" @click="openClose" :style="{paddingLeft:`${index/2}em`}">
			<div class="row titleBox" :style="`width:calc( ${(data.children.length===0?'100% - 3.5em':'100%')} )`">
				<dirIcon :active="data.open"></dirIcon>
				<div class="title">{{data.title}}</div>
			</div>
			<span class="hint">{{data.children.length===0?"空项目":""}}</span>
		</div>
		<dirTree :index="index+1" v-show="data.open===true" class="box" v-for="item in data.children" :data="item" :key="item.name"></dirTree>
	</template>
	<div class="fileTitle" v-else :style="{paddingLeft:`${index}em`}"><img src="@/assets/file.png" alt=""><span>{{data.title}}</span></div>
</div>

</template>
<style>
:root{
	--icon-width:1.5em;
	--bg:blue;
}
</style>
<style scoped>
img{
	width: 1em;
	height: 1em;
}

.dirTree{
	font-size: var(--dir-size);
	position: relative;
	/* display: flex;
    align-items: center;
    align-content: center;
    flex-direction: row; */
}
.dirTitle{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	/* padding:0 .5em; */
}
.titleBox{
	padding-left:.5em;
}
.title{
	width: calc( 100% -  var(--dir-size));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fileTitle{
	width: calc( 100% );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
}
.fileTitle:hover,.dirTitle:hover{
	background-color: rgba(255, 255, 255, 0.2);
}
.fileTitle:active,.dirTitle:active{
	background: rgba(0, 110, 255, 0.251) !important;
}
.row{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.box{
}
.hint{
	color: rgb(124, 124, 124);
}
</style>